<template>
<div>
<div class="header">
当前城市
</div>
<div class="searchbox">
    <input type="text" value="输入城市姓名或拼音" @keyup="getCity(allCity)" v-model="inputCity">
</div>
<div class="showSearch" v-show="is" style="position:absolute;top:1.86rem;left:0;">
 <li v-for="city in inputList" :key="city.cityId" @click="changeCityLocation(city.name,city.cityId)">{{city.name}}</li>
</div>
<div class="hotGps">
<div>
    <div class="gpsName">GPS定位你所在城市：</div>
    <div class="gpsShow" @click="changeCityLocation(currentCity,currentCityIndex)">{{currentCity}}</div>
</div>
<get-location @getlocation="getLocation($event)" v-if="allCity.length"></get-location>
<div>
    <div class="gpsName">热门城市</div>
    <ul v-if="hotCity.length">
        <li class="gpsShow" v-for="city in hotCity" :key="city.cityId" @click="changeCityLocation(city.name,city.cityId)">{{city.name}}</li>
    </ul>
</div>
</div>

<all-city :dataIndex="CityIndex" :dataCity="cityList" @changecity="changeCityLocation"></all-city>
    
</div>
</template>

<style lang="scss" scoped>
.showSearch{
    width:7.5rem;
    height:11.48rem;
    background-Color:white;
    z-index:200;
    li{
        height:0.3rem;
        margin-left:0.5rem;
                margin-top:0.5rem;

    }
}
 .header{
     height:0.88rem;
     text-align: center;
     line-height:0.88rem;
    font-size:0.34rem;
 }
.searchbox{
  height:0.98rem;
    background-color:  #f4f4f4;
     input{
         background-color: white;
         height:0.6rem;
         width:6.9rem;
         margin:0.19rem 0.3rem;
     }
 }
 .hotGps{
     box-sizing: border-box;
     height:4.16rem;
     padding-top:0.3rem;
     padding-left:0.3rem;
     .gpsName{
         height:0.38rem;
         margin-bottom: 0.2rem;
         color:#797d82;
     }
     .gpsShow{
         height:0.6rem;
         width:1.98rem;
        background-color:  #f4f4f4;
        line-height: 0.6rem;
        text-align: center;
        margin-bottom:0.3rem;
        margin-left:0.15rem;
        margin-right:0.15rem;
     }
     li{
         float:left;
     }
 }
</style>

<script>
import GetLocation from './components/getLocation.vue'
import {getCityAll} from '@/api/location.js'
import AllCity from './components/allCityList.vue'
export default {
    data(){
        return{
         currentCity:'',
         currentCityIndex:'',
         hotCity:[],
         allCity:[],
         CityIndex:[],
         cityList:{},
         inputCity:'',
         inputList:[],
         is:false
        }
    },
    components:{
        GetLocation,
        AllCity
    },
    methods:{
        getLocation(e){
         this.currentCity=e
         this.getLocationIndex(this.allCity)

        },
        getLocationIndex(arr){
            arr.forEach(item=>{
                if(item.name==this.currentCity){
                    this.currentCityIndex=item.cityId
                }
            })

        },
        getHotCity(val){
            val.forEach(item=>{
                if(item.isHot==1){
                    this.hotCity.push(item)
                }
            })
        },
        getCityName(arr){
            arr.forEach(item=>{
                let firstKey =item.pinyin.charAt(0).toUpperCase()
                if(!this.cityList[firstKey]){
                    this.cityList[firstKey]=[]
                    this.CityIndex.push(firstKey)
                }
                this.cityList[firstKey].push(item)
            })
            this.CityIndex.sort()

        },
        changeCityLocation(val1,val2){
            localStorage.setItem('cityName',val1)
            localStorage.setItem('cityId',val2)
            this.$store.commit('setCityName')
            this.$store.commit('setCityId')
            this.$router.push('/movie')

        },
        getCity(arr){
            if(this.inputCity==="") return;
            this.inputList=[]
            var reg=/^[\u4e00-\u9fa5]*$/
            if(reg.test(this.inputCity)){
            arr.forEach(item=>{
                if(item.name.includes(this.inputCity)){
                   this.inputList.push(item)
                }
            }
            )
            this.is=true
            }


        }

    },
    created(){
        getCityAll().then(res=>{
            console.log(res.data.cities)
            this.allCity=res.data.cities
            this.getHotCity(this.allCity)
             this.getCityName(this.allCity)
        })
        console.log(this.hotCity)


    }
    
}
</script>

<style lang="scss" scoped>
div{
    font-size:0.3rem;
}

</style>